<template>
  <div class="user-info-tab">
    <UserInfo
      :userId="userId"
      :show-avatar="showAvatar"
      :show-name="showName"
      :show-account="showAccount"
      :avatar-size="avatarSize"
      :disabled="disabled"
      :get-popup-container="getPopupContainer"
      :auto-load="autoLoad"
      :user-info="userInfo"
      @click="handleClick"
      @user-loaded="handleUserLoaded"
    />
    <Button 
      v-if="removable"
      type="text" 
      size="small" 
      class="user-info-tab__remove"
      @click="handleRemove"
    >
      <Icon icon="ant-design:close-outlined" />
    </Button>
  </div>
</template>

<script setup>
import { Button } from 'ant-design-vue'
import Icon from '@/components/Icon/Icon.vue'
import UserInfo from './index.vue'

defineOptions({ name: 'UserInfoTab' })

const props = defineProps({
  userId: {
    type: String,
    required: true
  },
  showAvatar: {
    type: Boolean,
    default: true
  },
  showName: {
    type: Boolean,
    default: true
  },
  showAccount: {
    type: Boolean,
    default: false
  },
  avatarSize: {
    type: Number,
    default: 32
  },
  disabled: {
    type: Boolean,
    default: false
  },
  getPopupContainer: {
    type: Function,
    default: null
  },
  autoLoad: {
    type: Boolean,
    default: true
  },
  userInfo: {
    type: Object,
    default: null
  },
  removable: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['click', 'userLoaded', 'remove'])

const handleClick = (event) => {
  emit('click', event)
}

const handleUserLoaded = (user) => {
  emit('userLoaded', user)
}

const handleRemove = () => {
  emit('remove', props.userId)
}
</script>

<style scoped>
.user-info-tab {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: #f5f5f5;
  border-radius: 16px;
  border: 1px solid #d9d9d9;
}

.user-info-tab__remove {
  padding: 2px;
  min-width: auto;
  height: auto;
  color: #8c8c8c;
}

.user-info-tab__remove:hover {
  color: #ff4d4f;
  background-color: rgba(255, 77, 79, 0.1);
}
</style> 